import React, { useState, useEffect } from 'react';
import { Plus, Edit2, Trash2, X, Menu, Phone, Mail, Home, ArrowUp, ArrowDown, Type, LayoutTemplate, FileImage, Lock, Star } from 'lucide-react';

const RenovationWebsite = () => {
  const [isAdmin, setIsAdmin] = useState(false);
  const [showPasswordModal, setShowPasswordModal] = useState(false);
  const [passwordInput, setPasswordInput] = useState("");
  const [adminPassword, setAdminPassword] = useState("admin123");
  const [editingPassword, setEditingPassword] = useState(false);
  const [tempPassword, setTempPassword] = useState("");
  const [showAdminPanel, setShowAdminPanel] = useState(false);
  
  const [siteName, setSiteName] = useState("VINT SERVICE");
  const [siteSubtitle, setSiteSubtitle] = useState("Multiservice professionnel");
  const [themeColor, setThemeColor] = useState("blue");
  const [editingSiteSettings, setEditingSiteSettings] = useState(false);
  const [tempSiteName, setTempSiteName] = useState("");
  const [tempSiteSubtitle, setTempSiteSubtitle] = useState("");
  const [tempThemeColor, setTempThemeColor] = useState("blue");
  
  const [showHomePage, setShowHomePage] = useState(true);
  const [showRealisations, setShowRealisations] = useState(false);
  const [homePageData, setHomePageData] = useState({
    title: "Bienvenue chez VINT SERVICE",
    subtitle: "Votre partenaire de confiance pour tous vos travaux",
    description: "Nous proposons des services professionnels de rénovation et d'entretien pour votre habitat. Qualité, rapidité et satisfaction garanties.",
    images: []
  });
  const [editingHomePage, setEditingHomePage] = useState(false);
  const [tempHomeData, setTempHomeData] = useState(homePageData);
  
  const [realisationsData, setRealisationsData] = useState([
    {
      id: 1,
      name: "Projets récents",
      images: []
    }
  ]);
  const [editingRealisationCategory, setEditingRealisationCategory] = useState(null);
  const [tempRealisationName, setTempRealisationName] = useState("");

  const themeColors = {
    blue: { primary: "blue", secondary: "indigo", gradient: "from-blue-600 to-indigo-600" },
    green: { primary: "green", secondary: "emerald", gradient: "from-green-600 to-emerald-600" },
    purple: { primary: "purple", secondary: "violet", gradient: "from-purple-600 to-violet-600" },
    red: { primary: "red", secondary: "rose", gradient: "from-red-600 to-rose-600" },
    orange: { primary: "orange", secondary: "amber", gradient: "from-orange-600 to-amber-600" }
  };

  const currentTheme = themeColors[themeColor];
  
  const [currentCategory, setCurrentCategory] = useState(null);
  const [currentPage, setCurrentPage] = useState(null);
  const [showSidebar, setShowSidebar] = useState(false);
  
  const [memo, setMemo] = useState("🏠 Votre partenaire de confiance pour tous vos travaux de rénovation");
  const [contact, setContact] = useState({
    phone: "06.83.45.58.63",
    email: "contact@vintservice.com"
  });
  
  const [reviewLink, setReviewLink] = useState("https://g.page/r/votre-lien-avis/review");
  const [editingReviewLink, setEditingReviewLink] = useState(false);
  const [tempReviewLink, setTempReviewLink] = useState("");
  
  const [categories, setCategories] = useState([
    {
      id: 1,
      name: "Intérieur",
      pages: [
        {
          id: 1,
          title: "Nettoyage vitres",
          layout: "text-only",
          content: [
            { id: 1, type: "text", value: "Service professionnel de nettoyage de vitres pour un résultat impeccable." }
          ]
        }
      ]
    },
    {
      id: 2,
      name: "Extérieur",
      pages: [
        {
          id: 1,
          title: "Entretien toiture",
          layout: "text-only",
          content: [
            { id: 1, type: "text", value: "Maintenance et nettoyage de toiture pour préserver votre habitat." }
          ]
        }
      ]
    }
  ]);

  const [editingMemo, setEditingMemo] = useState(false);
  const [editingContact, setEditingContact] = useState(false);
  const [editingCategory, setEditingCategory] = useState(null);
  const [editingPage, setEditingPage] = useState(null);
  const [editingContent, setEditingContent] = useState(null);
  const [editingLayout, setEditingLayout] = useState(null);
  
  const [tempMemo, setTempMemo] = useState("");
  const [tempContact, setTempContact] = useState({ phone: "", email: "" });
  const [tempCategory, setTempCategory] = useState("");
  const [tempPage, setTempPage] = useState("");
  const [tempContent, setTempContent] = useState("");
  const [tempLayout, setTempLayout] = useState("text-only");

  const layouts = [
    { id: "text-only", name: "Texte uniquement", icon: Type },
    { id: "image-only", name: "Image uniquement", icon: FileImage },
    { id: "text-image", name: "Texte + Image", icon: LayoutTemplate },
    { id: "image-text", name: "Image + Texte", icon: LayoutTemplate }
  ];

  useEffect(() => {
    if (categories.length > 0 && !currentCategory) {
      setCurrentCategory(categories[0]);
      if (categories[0].pages.length > 0) {
        setCurrentPage(categories[0].pages[0]);
      }
    }
  }, [categories, currentCategory]);

  const handleAdminToggle = () => {
    if (isAdmin) {
      setIsAdmin(false);
    } else {
      setShowPasswordModal(true);
    }
  };

  const handlePasswordSubmit = () => {
    if (passwordInput === adminPassword) {
      setIsAdmin(true);
      setShowPasswordModal(false);
      setPasswordInput("");
    } else {
      alert("Mot de passe incorrect");
      setPasswordInput("");
    }
  };

  const addCategory = () => {
    const newCat = {
      id: Date.now(),
      name: "Nouvelle catégorie",
      pages: []
    };
    setCategories([...categories, newCat]);
  };

  const updateCategory = (id, newName) => {
    setCategories(categories.map(cat => 
      cat.id === id ? { ...cat, name: newName } : cat
    ));
    setEditingCategory(null);
  };

  const deleteCategory = (id) => {
    setCategories(categories.filter(cat => cat.id !== id));
    if (currentCategory?.id === id) {
      setCurrentCategory(categories[0] || null);
      setCurrentPage(categories[0]?.pages[0] || null);
    }
  };

  const moveCategoryUp = (index) => {
    if (index > 0) {
      const newCategories = [...categories];
      [newCategories[index - 1], newCategories[index]] = [newCategories[index], newCategories[index - 1]];
      setCategories(newCategories);
    }
  };

  const moveCategoryDown = (index) => {
    if (index < categories.length - 1) {
      const newCategories = [...categories];
      [newCategories[index], newCategories[index + 1]] = [newCategories[index + 1], newCategories[index]];
      setCategories(newCategories);
    }
  };

  const addPage = (categoryId) => {
    const newPage = {
      id: Date.now(),
      title: "Nouvelle page",
      layout: "text-only",
      content: []
    };
    setCategories(categories.map(cat => 
      cat.id === categoryId 
        ? { ...cat, pages: [...cat.pages, newPage] }
        : cat
    ));
  };

  const updatePage = (categoryId, pageId, newTitle) => {
    setCategories(categories.map(cat => 
      cat.id === categoryId 
        ? {
            ...cat,
            pages: cat.pages.map(page =>
              page.id === pageId ? { ...page, title: newTitle } : page
            )
          }
        : cat
    ));
    setEditingPage(null);
  };

  const deletePage = (categoryId, pageId) => {
    setCategories(categories.map(cat => 
      cat.id === categoryId 
        ? { ...cat, pages: cat.pages.filter(page => page.id !== pageId) }
        : cat
    ));
    if (currentPage?.id === pageId) {
      const cat = categories.find(c => c.id === categoryId);
      setCurrentPage(cat?.pages[0] || null);
    }
  };

  const movePageUp = (categoryId, pageIndex) => {
    if (pageIndex > 0) {
      setCategories(categories.map(cat => {
        if (cat.id === categoryId) {
          const newPages = [...cat.pages];
          [newPages[pageIndex - 1], newPages[pageIndex]] = [newPages[pageIndex], newPages[pageIndex - 1]];
          return { ...cat, pages: newPages };
        }
        return cat;
      }));
    }
  };

  const movePageDown = (categoryId, pageIndex) => {
    setCategories(categories.map(cat => {
      if (cat.id === categoryId && pageIndex < cat.pages.length - 1) {
        const newPages = [...cat.pages];
        [newPages[pageIndex], newPages[pageIndex + 1]] = [newPages[pageIndex + 1], newPages[pageIndex]];
        return { ...cat, pages: newPages };
      }
      return cat;
    }));
  };

  const updatePageLayout = (categoryId, pageId, newLayout) => {
    setCategories(categories.map(cat => 
      cat.id === categoryId 
        ? {
            ...cat,
            pages: cat.pages.map(page =>
              page.id === pageId ? { ...page, layout: newLayout } : page
            )
          }
        : cat
    ));
    setEditingLayout(null);
  };

  const addContent = (categoryId, pageId, type) => {
    const newContent = {
      id: Date.now(),
      type: type,
      value: type === "text" ? "Nouveau contenu" : ""
    };
    
    setCategories(prevCategories => {
      const updatedCategories = prevCategories.map(cat => {
        if (cat.id === categoryId) {
          return {
            ...cat,
            pages: cat.pages.map(page => {
              if (page.id === pageId) {
                return { 
                  ...page, 
                  content: [...page.content, newContent] 
                };
              }
              return page;
            })
          };
        }
        return cat;
      });
      
      // Mettre à jour la page courante pour forcer le re-render
      const currentCat = updatedCategories.find(c => c.id === categoryId);
      const updatedPage = currentCat?.pages.find(p => p.id === pageId);
      if (updatedPage) {
        setCurrentPage({...updatedPage});
      }
      
      console.log("Updated categories:", updatedCategories);
      return updatedCategories;
    });
  };

  const updateContent = (categoryId, pageId, contentId, newValue) => {
    setCategories(prevCategories => {
      const updatedCategories = prevCategories.map(cat => {
        if (cat.id === categoryId) {
          return {
            ...cat,
            pages: cat.pages.map(page => {
              if (page.id === pageId) {
                return {
                  ...page,
                  content: page.content.map(item => {
                    if (item.id === contentId) {
                      return { ...item, value: newValue };
                    }
                    return item;
                  })
                };
              }
              return page;
            })
          };
        }
        return cat;
      });
      
      // Mettre à jour la page courante pour forcer le re-render
      const currentCat = updatedCategories.find(c => c.id === categoryId);
      const updatedPage = currentCat?.pages.find(p => p.id === pageId);
      if (updatedPage) {
        setCurrentPage({...updatedPage});
      }
      
      return updatedCategories;
    });
    setEditingContent(null);
  };

  const deleteContent = (categoryId, pageId, contentId) => {
    setCategories(prevCategories => {
      const updatedCategories = prevCategories.map(cat => {
        if (cat.id === categoryId) {
          return {
            ...cat,
            pages: cat.pages.map(page => {
              if (page.id === pageId) {
                return { 
                  ...page, 
                  content: page.content.filter(item => item.id !== contentId) 
                };
              }
              return page;
            })
          };
        }
        return cat;
      });
      
      return updatedCategories;
    });
  };

  const handleImageUpload = (categoryId, pageId, contentId, e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        updateContent(categoryId, pageId, contentId, event.target.result);
        // Force un re-render en mettant à jour la page courante
        setCategories(prevCategories => {
          const updatedCats = prevCategories.map(cat => 
            cat.id === categoryId 
              ? {
                  ...cat,
                  pages: cat.pages.map(page =>
                    page.id === pageId 
                      ? {
                          ...page,
                          content: page.content.map(item =>
                            item.id === contentId ? { ...item, value: event.target.result } : item
                          )
                        }
                      : page
                  )
                }
              : cat
          );
          // Mettre à jour la page courante
          const currentCat = updatedCats.find(c => c.id === categoryId);
          const updatedPage = currentCat?.pages.find(p => p.id === pageId);
          if (updatedPage) {
            setCurrentPage({...updatedPage});
          }
          return updatedCats;
        });
      };
      reader.readAsDataURL(file);
    }
  };

  const selectPage = (category, page) => {
    setShowHomePage(false);
    setShowRealisations(false);
    setCurrentCategory(category);
    setCurrentPage(page);
    setShowSidebar(false);
  };

  const goToHomePage = () => {
    setShowHomePage(true);
    setShowRealisations(false);
    setCurrentCategory(null);
    setCurrentPage(null);
    setShowSidebar(false);
  };

  const goToRealisations = () => {
    setShowHomePage(false);
    setShowRealisations(true);
    setCurrentCategory(null);
    setCurrentPage(null);
    setShowSidebar(false);
  };

  const handleHomeImageUpload = (index, e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setHomePageData(prev => {
          const newImages = [...prev.images];
          newImages[index] = event.target.result;
          return { ...prev, images: newImages };
        });
      };
      reader.readAsDataURL(file);
    }
  };

  const addHomeImage = () => {
    setHomePageData(prev => ({
      ...prev,
      images: [...prev.images, ""]
    }));
  };

  const deleteHomeImage = (index) => {
    setHomePageData(prev => ({
      ...prev,
      images: prev.images.filter((_, i) => i !== index)
    }));
  };

  const addRealisationCategory = () => {
    const newCat = {
      id: Date.now(),
      name: "Nouvelle catégorie",
      images: []
    };
    setRealisationsData([...realisationsData, newCat]);
  };

  const updateRealisationCategory = (id, newName) => {
    setRealisationsData(realisationsData.map(cat => 
      cat.id === id ? { ...cat, name: newName } : cat
    ));
    setEditingRealisationCategory(null);
  };

  const deleteRealisationCategory = (id) => {
    setRealisationsData(realisationsData.filter(cat => cat.id !== id));
  };

  const handleRealisationImageUpload = (categoryId, index, e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        setRealisationsData(prev => prev.map(cat => {
          if (cat.id === categoryId) {
            const newImages = [...cat.images];
            newImages[index] = event.target.result;
            return { ...cat, images: newImages };
          }
          return cat;
        }));
      };
      reader.readAsDataURL(file);
    }
  };

  const addRealisationImage = (categoryId) => {
    setRealisationsData(prev => prev.map(cat => 
      cat.id === categoryId ? { ...cat, images: [...cat.images, ""] } : cat
    ));
  };

  const deleteRealisationImage = (categoryId, index) => {
    setRealisationsData(prev => prev.map(cat => 
      cat.id === categoryId ? { ...cat, images: cat.images.filter((_, i) => i !== index) } : cat
    ));
  };

  const renderContent = (page) => {
    if (!page || !page.content || page.content.length === 0) {
      return <p className="text-stone-500 italic text-center py-8">Aucun contenu pour le moment</p>;
    }

    return (
      <div className="space-y-8">
        {page.content.map((item) => (
          <div key={item.id} className="relative group">
            {item.type === "text" ? (
              <div className="prose max-w-none bg-blue-50 p-4 rounded-lg">
                <p className="text-stone-700 leading-relaxed text-lg" style={{fontFamily: 'Intro, system-ui, sans-serif'}}>
                  {item.value}
                </p>
              </div>
            ) : (
              <div className="rounded-xl overflow-hidden shadow-lg">
                {item.value ? (
                  <img src={item.value} alt="Contenu" className="w-full h-auto object-cover" />
                ) : (
                  <div className="bg-gradient-to-br from-blue-50 to-blue-100 h-64 flex items-center justify-center">
                    <div className="text-center">
                      <FileImage className="w-16 h-16 text-blue-300 mx-auto mb-2" />
                      <p className="text-blue-600 font-medium">Cliquez sur modifier pour charger une image</p>
                    </div>
                  </div>
                )}
              </div>
            )}
            
            {isAdmin && (
              <div className="absolute -right-2 -top-2 flex space-x-1 bg-white rounded-lg shadow-xl p-1 z-10">
                <button
                  onClick={() => {
                    if (item.type === "text") {
                      setTempContent(item.value);
                      setEditingContent({ 
                        categoryId: currentCategory.id, 
                        pageId: currentPage.id, 
                        contentId: item.id 
                      });
                    } else {
                      document.getElementById(`image-upload-${item.id}`).click();
                    }
                  }}
                  className="p-2 hover:bg-blue-50 rounded transition-colors"
                  title={item.type === "text" ? "Modifier le texte" : "Modifier l'image"}
                >
                  <Edit2 className="w-4 h-4 text-blue-600" />
                </button>
                <button
                  onClick={() => {
                    if (confirm("Voulez-vous vraiment supprimer cet élément ?")) {
                      deleteContent(currentCategory.id, currentPage.id, item.id);
                    }
                  }}
                  className="p-2 hover:bg-red-50 rounded transition-colors"
                  title="Supprimer"
                >
                  <Trash2 className="w-4 h-4 text-red-600" />
                </button>
                {item.type === "image" && (
                  <input
                    id={`image-upload-${item.id}`}
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={(e) => handleImageUpload(currentCategory.id, currentPage.id, item.id, e)}
                  />
                )}
              </div>
            )}
          </div>
        ))}
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
      <style>{`
        @import url('https://fonts.cdnfonts.com/css/intro');

        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn { animation: fadeIn 0.3s ease-out; }

        @keyframes dustFall {
          0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 0.5; }
          100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
        }

        .dust-container {
          position: absolute; top: 0; left: 0; width: 100%; height: 100%;
          pointer-events: none; overflow: hidden; z-index: 0;
        }

        .dust-particle {
          position: absolute; width: 3px; height: 3px;
          background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(147, 197, 253, 0.2) 50%, transparent 100%);
          border-radius: 50%; animation: dustFall linear infinite;
          box-shadow: 0 0 4px rgba(59, 130, 246, 0.3);
        }

        .dust-particle:nth-child(3n) {
          width: 2px; height: 2px;
          background: radial-gradient(circle, rgba(96, 165, 250, 0.5) 0%, rgba(191, 219, 254, 0.2) 50%, transparent 100%);
        }

        .dust-particle:nth-child(5n) {
          width: 4px; height: 4px;
          background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, rgba(147, 197, 253, 0.15) 50%, transparent 100%);
        }

        * { font-family: 'Intro', system-ui, sans-serif; }
      `}</style>

      <header className={`bg-white shadow-md border-b-2 border-${currentTheme.primary}-100 backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-5">
            <div className="flex items-center space-x-4">
              <div className={`bg-gradient-to-br from-${currentTheme.primary}-500 to-${currentTheme.primary}-700 p-2 rounded-xl shadow-lg`}>
                <Home className="w-7 h-7 text-white" />
              </div>
              <div>
                <h1 className={`text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-${currentTheme.primary}-600 to-${currentTheme.secondary}-600`}>
                  {siteName}
                </h1>
                <p className="text-sm text-stone-600 font-medium">{siteSubtitle}</p>
              </div>
            </div>
            
            <button
              onClick={() => setShowSidebar(!showSidebar)}
              className="lg:hidden p-2 rounded-lg hover:bg-blue-50 transition-colors"
            >
              <Menu className="w-6 h-6 text-stone-700" />
            </button>

            <div className="hidden lg:flex items-center space-x-4">
              <button
                onClick={goToHomePage}
                className={`px-4 py-2 rounded-lg font-bold text-sm transition-all ${
                  showHomePage
                    ? `bg-gradient-to-r ${currentTheme.gradient} text-white shadow-lg`
                    : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
                }`}
              >
                <Home className="w-4 h-4 inline mr-2" />
                Accueil
              </button>
              <button
                onClick={goToRealisations}
                className={`px-4 py-2 rounded-lg font-bold text-sm transition-all ${
                  showRealisations
                    ? `bg-gradient-to-r ${currentTheme.gradient} text-white shadow-lg`
                    : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
                }`}
              >
                <FileImage className="w-4 h-4 inline mr-2" />
                Nos réalisations
              </button>
              <div className={`flex items-center space-x-2 px-4 py-2 bg-${currentTheme.primary}-50 rounded-lg`}>
                <Phone className={`w-4 h-4 text-${currentTheme.primary}-600`} />
                <span className={`text-sm font-bold text-${currentTheme.primary}-900`}>{contact.phone}</span>
              </div>
              <div className={`flex items-center space-x-2 px-4 py-2 bg-${currentTheme.primary}-50 rounded-lg`}>
                <Mail className={`w-4 h-4 text-${currentTheme.primary}-600`} />
                <span className={`text-sm font-bold text-${currentTheme.primary}-900`}>{contact.email}</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      {memo && (
        <div className={`bg-gradient-to-r from-${currentTheme.primary}-600 via-${currentTheme.primary}-500 to-${currentTheme.secondary}-600 text-white py-4 px-4 shadow-lg`}>
          <div className="max-w-7xl mx-auto flex justify-between items-center">
            <p className="text-sm font-bold tracking-wide">{memo}</p>
            {isAdmin && (
              <div className="flex space-x-2">
                <button
                  onClick={() => { setTempMemo(memo); setEditingMemo(true); }}
                  className={`p-1.5 hover:bg-${currentTheme.primary}-700 rounded-lg transition-colors`}
                >
                  <Edit2 className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setMemo("")}
                  className={`p-1.5 hover:bg-${currentTheme.primary}-700 rounded-lg transition-colors`}
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            )}
          </div>
        </div>
      )}

      {isAdmin && !memo && (
        <div className={`bg-${currentTheme.primary}-100 border-b border-${currentTheme.primary}-200 py-2 px-4`}>
          <div className="max-w-7xl mx-auto">
            <button
              onClick={() => { setTempMemo("Nouveau mémo"); setEditingMemo(true); }}
              className={`text-sm text-${currentTheme.primary}-800 hover:text-${currentTheme.primary}-900 font-bold flex items-center space-x-1`}
            >
              <Plus className="w-4 h-4" />
              <span>Ajouter un mémo</span>
            </button>
          </div>
        </div>
      )}

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div className="flex gap-8">
          <aside className={`
            fixed lg:static inset-y-0 left-0 z-50 w-72 bg-white rounded-2xl shadow-2xl p-6 transition-transform duration-300 lg:transform-none border-2 border-${currentTheme.primary}-100
            ${showSidebar ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
          `}>
            <div className="flex justify-between items-center mb-6 lg:hidden">
              <h2 className={`text-xl font-black text-${currentTheme.primary}-900`}>Navigation</h2>
              <button onClick={() => setShowSidebar(false)}>
                <X className="w-5 h-5 text-stone-600" />
              </button>
            </div>

            <h2 className={`hidden lg:block text-xl font-black text-${currentTheme.primary}-900 mb-6 pb-3 border-b-2 border-${currentTheme.primary}-200`}>
              Nos Services
            </h2>
            
            <button
              onClick={goToHomePage}
              className={`w-full mb-4 px-4 py-3 rounded-xl font-bold transition-all flex items-center justify-center space-x-2 ${
                showHomePage
                  ? `bg-gradient-to-r ${currentTheme.gradient} text-white shadow-lg`
                  : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
              }`}
            >
              <Home className="w-5 h-5" />
              <span>Accueil</span>
            </button>

            <button
              onClick={goToRealisations}
              className={`w-full mb-4 px-4 py-3 rounded-xl font-bold transition-all flex items-center justify-center space-x-2 ${
                showRealisations
                  ? `bg-gradient-to-r ${currentTheme.gradient} text-white shadow-lg`
                  : 'bg-stone-100 text-stone-700 hover:bg-stone-200'
              }`}
            >
              <FileImage className="w-5 h-5" />
              <span>Nos réalisations</span>
            </button>
            
            <nav className="space-y-3">
              {categories.map((category, catIndex) => (
                <div key={category.id} className="space-y-2">
                  <div className={`flex justify-between items-center group bg-gradient-to-r from-${currentTheme.primary}-50 to-${currentTheme.secondary}-50 rounded-xl p-2`}>
                    <button
                      onClick={() => {
                        setCurrentCategory(category);
                        if (category.pages.length > 0) {
                          setCurrentPage(category.pages[0]);
                        } else {
                          setCurrentPage(null);
                        }
                      }}
                      className={`flex-1 text-left px-3 py-2 rounded-lg font-black text-${currentTheme.primary}-900 hover:bg-white transition-all`}
                    >
                      {category.name}
                    </button>
                    {isAdmin && (
                      <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                        <button
                          onClick={() => moveCategoryUp(catIndex)}
                          className="p-1 hover:bg-blue-200 rounded"
                          disabled={catIndex === 0}
                        >
                          <ArrowUp className="w-3 h-3 text-blue-700" />
                        </button>
                        <button
                          onClick={() => moveCategoryDown(catIndex)}
                          className="p-1 hover:bg-blue-200 rounded"
                          disabled={catIndex === categories.length - 1}
                        >
                          <ArrowDown className="w-3 h-3 text-blue-700" />
                        </button>
                        <button
                          onClick={() => { setTempCategory(category.name); setEditingCategory(category.id); }}
                          className="p-1 hover:bg-blue-200 rounded"
                        >
                          <Edit2 className="w-3 h-3 text-blue-700" />
                        </button>
                        <button
                          onClick={() => deleteCategory(category.id)}
                          className="p-1 hover:bg-red-100 rounded"
                        >
                          <Trash2 className="w-3 h-3 text-red-600" />
                        </button>
                      </div>
                    )}
                  </div>
                  
                  {currentCategory?.id === category.id && (
                    <div className="ml-4 space-y-1 animate-fadeIn">
                      {category.pages.map((page, pageIndex) => (
                        <div key={page.id} className="flex justify-between items-center group">
                          <button
                            onClick={() => selectPage(category, page)}
                            className={`flex-1 text-left px-3 py-2 rounded-lg text-sm font-bold transition-all ${
                              currentPage?.id === page.id
                                ? 'bg-blue-600 text-white shadow-lg'
                                : 'text-stone-700 hover:bg-blue-100'
                            }`}
                          >
                            {page.title}
                          </button>
                          {isAdmin && (
                            <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
                              <button
                                onClick={() => movePageUp(category.id, pageIndex)}
                                className="p-1 hover:bg-blue-100 rounded"
                                disabled={pageIndex === 0}
                              >
                                <ArrowUp className="w-3 h-3 text-blue-600" />
                              </button>
                              <button
                                onClick={() => movePageDown(category.id, pageIndex)}
                                className="p-1 hover:bg-blue-100 rounded"
                                disabled={pageIndex === category.pages.length - 1}
                              >
                                <ArrowDown className="w-3 h-3 text-blue-600" />
                              </button>
                              <button
                                onClick={() => { setTempPage(page.title); setEditingPage({ categoryId: category.id, pageId: page.id }); }}
                                className="p-1 hover:bg-blue-100 rounded"
                              >
                                <Edit2 className="w-3 h-3 text-blue-600" />
                              </button>
                              <button
                                onClick={() => deletePage(category.id, page.id)}
                                className="p-1 hover:bg-red-100 rounded"
                              >
                                <Trash2 className="w-3 h-3 text-red-600" />
                              </button>
                            </div>
                          )}
                        </div>
                      ))}
                      {isAdmin && (
                        <button
                          onClick={() => addPage(category.id)}
                          className="w-full px-3 py-2 text-left text-sm text-blue-700 hover:bg-blue-50 rounded-lg flex items-center space-x-1 font-bold"
                        >
                          <Plus className="w-3 h-3" />
                          <span>Ajouter une page</span>
                        </button>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </nav>

            {isAdmin && (
              <button
                onClick={addCategory}
                className="w-full mt-6 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all shadow-lg flex items-center justify-center space-x-2 font-black"
              >
                <Plus className="w-4 h-4" />
                <span>Nouvelle catégorie</span>
              </button>
            )}
          </aside>

          <main className="flex-1 bg-white rounded-2xl shadow-2xl p-10 animate-fadeIn overflow-hidden relative border-2 border-blue-100">
            <div className="dust-container">
              {[...Array(30)].map((_, i) => (
                <div key={i} className="dust-particle" style={{
                  left: `${Math.random() * 100}%`,
                  animationDelay: `${Math.random() * 5}s`,
                  animationDuration: `${5 + Math.random() * 5}s`
                }} />
              ))}
            </div>

            {showHomePage ? (
              <div className="relative z-10">
                <div className="text-center mb-12">
                  <h1 className={`text-5xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-${currentTheme.primary}-600 to-${currentTheme.secondary}-600 mb-4`}>
                    {homePageData.title}
                  </h1>
                  <p className={`text-2xl font-bold text-${currentTheme.primary}-700 mb-6`}>
                    {homePageData.subtitle}
                  </p>
                  <p className="text-lg text-stone-600 max-w-3xl mx-auto leading-relaxed">
                    {homePageData.description}
                  </p>
                  {isAdmin && (
                    <button
                      onClick={() => {
                        setTempHomeData(homePageData);
                        setEditingHomePage(true);
                      }}
                      className={`mt-6 px-6 py-3 bg-gradient-to-r ${currentTheme.gradient} text-white rounded-xl hover:shadow-lg transition-all font-bold flex items-center space-x-2 mx-auto`}
                    >
                      <Edit2 className="w-4 h-4" />
                      <span>Modifier la page d'accueil</span>
                    </button>
                  )}
                </div>

                {homePageData.images.length > 0 && (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
                    {homePageData.images.map((img, index) => (
                      <div key={index} className="relative group">
                        {img ? (
                          <img
                            src={img}
                            alt={`Image ${index + 1}`}
                            className="w-full h-64 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all"
                          />
                        ) : (
                          <div className={`w-full h-64 bg-gradient-to-br from-${currentTheme.primary}-50 to-${currentTheme.secondary}-50 rounded-xl flex items-center justify-center`}>
                            <FileImage className={`w-16 h-16 text-${currentTheme.primary}-300`} />
                          </div>
                        )}
                        {isAdmin && (
                          <div className="absolute top-2 right-2 flex space-x-2 bg-white rounded-lg shadow-xl p-1">
                            <button
                              onClick={() => document.getElementById(`home-img-${index}`).click()}
                              className="p-2 hover:bg-blue-50 rounded"
                            >
                              <Edit2 className="w-4 h-4 text-blue-600" />
                            </button>
                            <button
                              onClick={() => deleteHomeImage(index)}
                              className="p-2 hover:bg-red-50 rounded"
                            >
                              <Trash2 className="w-4 h-4 text-red-600" />
                            </button>
                            <input
                              id={`home-img-${index}`}
                              type="file"
                              accept="image/*"
                              className="hidden"
                              onChange={(e) => handleHomeImageUpload(index, e)}
                            />
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}

                {isAdmin && (
                  <div className="mt-8 text-center">
                    <button
                      onClick={addHomeImage}
                      className={`px-6 py-3 bg-gradient-to-r from-${currentTheme.secondary}-500 to-${currentTheme.secondary}-600 text-white rounded-xl hover:shadow-lg transition-all font-bold flex items-center space-x-2 mx-auto`}
                    >
                      <Plus className="w-5 h-5" />
                      <span>Ajouter une image</span>
                    </button>
                  </div>
                )}

                <div className={`mt-16 pt-8 border-t-2 border-${currentTheme.primary}-200`}>
                  <h2 className={`text-3xl font-black text-${currentTheme.primary}-900 text-center mb-8`}>
                    Nos services
                  </h2>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    {categories.map(category => (
                      <div key={category.id} className={`p-6 bg-gradient-to-br from-${currentTheme.primary}-50 to-${currentTheme.secondary}-50 rounded-xl hover:shadow-lg transition-all`}>
                        <button
                          onClick={() => {
                            setCurrentCategory(category);
                            if (category.pages.length > 0) {
                              setCurrentPage(category.pages[0]);
                            }
                            setShowHomePage(false);
                          }}
                          className="w-full text-left mb-4"
                        >
                          <h3 className={`text-2xl font-black text-${currentTheme.primary}-900 mb-2 hover:text-${currentTheme.primary}-600 transition-colors`}>
                            {category.name}
                          </h3>
                        </button>
                        <div className="space-y-2">
                          {category.pages.map(page => (
                            <button
                              key={page.id}
                              onClick={() => {
                                setCurrentCategory(category);
                                setCurrentPage(page);
                                setShowHomePage(false);
                              }}
                              className="w-full p-3 bg-white rounded-lg hover:shadow-md transition-all text-left group"
                            >
                              <div className="flex items-center justify-between">
                                <h4 className={`text-base font-bold text-${currentTheme.primary}-800 group-hover:text-${currentTheme.primary}-600 transition-colors`}>
                                  {page.title}
                                </h4>
                                <span className="text-stone-400 text-xs">
                                  {page.content?.length || 0} élément{page.content?.length > 1 ? 's' : ''}
                                </span>
                              </div>
                            </button>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ) : showRealisations ? (
              <div className="relative z-10">
                <h1 className={`text-4xl md:text-5xl font-black text-transparent bg-clip-text bg-gradient-to-r from-${currentTheme.primary}-600 to-${currentTheme.secondary}-600 mb-8 text-center`}>
                  Nos Réalisations
                </h1>

                {realisationsData.map((category) => (
                  <div key={category.id} className="mb-12">
                    <div className="flex justify-between items-center mb-6">
                      <h2 className={`text-3xl font-black text-${currentTheme.primary}-900`}>
                        {category.name}
                      </h2>
                      {isAdmin && (
                        <div className="flex space-x-2">
                          <button
                            onClick={() => {
                              setTempRealisationName(category.name);
                              setEditingRealisationCategory(category.id);
                            }}
                            className="p-2 bg-blue-100 hover:bg-blue-200 rounded-lg transition-colors"
                          >
                            <Edit2 className="w-4 h-4 text-blue-600" />
                          </button>
                          <button
                            onClick={() => {
                              if (confirm("Supprimer cette catégorie ?")) {
                                deleteRealisationCategory(category.id);
                              }
                            }}
                            className="p-2 bg-red-100 hover:bg-red-200 rounded-lg transition-colors"
                          >
                            <Trash2 className="w-4 h-4 text-red-600" />
                          </button>
                        </div>
                      )}
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                      {category.images.map((img, index) => (
                        <div key={index} className="relative group">
                          {img ? (
                            <img
                              src={img}
                              alt={`${category.name} ${index + 1}`}
                              className="w-full h-64 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all cursor-pointer"
                              onClick={() => window.open(img, '_blank')}
                            />
                          ) : (
                            <div className={`w-full h-64 bg-gradient-to-br from-${currentTheme.primary}-50 to-${currentTheme.secondary}-50 rounded-xl flex items-center justify-center`}>
                              <FileImage className={`w-16 h-16 text-${currentTheme.primary}-300`} />
                            </div>
                          )}
                          {isAdmin && (
                            <div className="absolute top-2 right-2 flex space-x-2 bg-white rounded-lg shadow-xl p-1">
                              <button
                                onClick={() => document.getElementById(`realisation-img-${category.id}-${index}`).click()}
                                className="p-2 hover:bg-blue-50 rounded"
                              >
                                <Edit2 className="w-4 h-4 text-blue-600" />
                              </button>
                              <button
                                onClick={() => deleteRealisationImage(category.id, index)}
                                className="p-2 hover:bg-red-50 rounded"
                              >
                                <Trash2 className="w-4 h-4 text-red-600" />
                              </button>
                              <input
                                id={`realisation-img-${category.id}-${index}`}
                                type="file"
                                accept="image/*"
                                className="hidden"
                                onChange={(e) => handleRealisationImageUpload(category.id, index, e)}
                              />
                            </div>
                          )}
                        </div>
                      ))}
                    </div>

                    {isAdmin && (
                      <button
                        onClick={() => addRealisationImage(category.id)}
                        className={`mt-6 px-6 py-3 bg-gradient-to-r from-${currentTheme.secondary}-500 to-${currentTheme.secondary}-600 text-white rounded-xl hover:shadow-lg transition-all font-bold flex items-center space-x-2`}
                      >
                        <Plus className="w-5 h-5" />
                        <span>Ajouter une photo</span>
                      </button>
                    )}
                  </div>
                ))}

                {isAdmin && (
                  <button
                    onClick={addRealisationCategory}
                    className={`mt-6 px-6 py-3 bg-gradient-to-r ${currentTheme.gradient} text-white rounded-xl hover:shadow-lg transition-all font-bold flex items-center space-x-2 mx-auto`}
                  >
                    <Plus className="w-5 h-5" />
                    <span>Nouvelle catégorie de réalisations</span>
                  </button>
                )}
              </div>
            ) : currentPage ? (
              <div className="relative z-10">
                <div className="flex justify-between items-center mb-8 pb-4 border-b-2 border-blue-200">
                  <h1 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">
                    {currentPage.title}
                  </h1>
                  {isAdmin && (
                    <button
                      onClick={() => {
                        setTempLayout(currentPage.layout);
                        setEditingLayout({ categoryId: currentCategory.id, pageId: currentPage.id });
                      }}
                      className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors flex items-center space-x-2 font-bold"
                    >
                      <LayoutTemplate className="w-4 h-4" />
                      <span>Mise en page</span>
                    </button>
                  )}
                </div>
                
                {renderContent(currentPage)}

                {isAdmin && currentPage && (
                  <div className="mt-8 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border-2 border-blue-200">
                    <p className="text-sm font-bold text-blue-900 mb-3">Ajouter du contenu :</p>
                    <div className="flex gap-3">
                      <button
                        onClick={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          console.log("Ajout texte - Current:", currentCategory?.id, currentPage?.id);
                          if (currentCategory && currentPage) {
                            addContent(currentCategory.id, currentPage.id, "text");
                          }
                        }}
                        className="flex-1 px-5 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 transition-all shadow-lg flex items-center justify-center space-x-2 font-bold"
                      >
                        <Type className="w-5 h-5" />
                        <span>Ajouter du texte</span>
                      </button>
                      <button
                        onClick={(e) => {
                          e.preventDefault();
                          e.stopPropagation();
                          console.log("Ajout image - Current:", currentCategory?.id, currentPage?.id);
                          if (currentCategory && currentPage) {
                            addContent(currentCategory.id, currentPage.id, "image");
                          }
                        }}
                        className="flex-1 px-5 py-3 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white rounded-xl hover:from-indigo-600 hover:to-indigo-700 transition-all shadow-lg flex items-center justify-center space-x-2 font-bold"
                      >
                        <FileImage className="w-5 h-5" />
                        <span>Ajouter une image</span>
                      </button>
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <div className="text-center py-16 relative z-10">
                <div className="bg-gradient-to-br from-blue-100 to-indigo-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                  <Home className="w-12 h-12 text-blue-600" />
                </div>
                <h2 className="text-3xl font-black text-blue-900 mb-4">
                  Bienvenue sur {siteName}
                </h2>
                <p className="text-stone-600 text-lg mb-6">
                  {currentCategory && currentCategory.pages.length === 0 
                    ? "Cette catégorie ne contient pas encore de pages"
                    : "Sélectionnez une catégorie pour découvrir nos services"
                  }
                </p>
                {isAdmin && currentCategory && currentCategory.pages.length === 0 && (
                  <button
                    onClick={() => addPage(currentCategory.id)}
                    className="px-6 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 transition-all shadow-lg flex items-center space-x-2 font-bold mx-auto"
                  >
                    <Plus className="w-5 h-5" />
                    <span>Créer la première page</span>
                  </button>
                )}
              </div>
            )}
          </main>
        </div>
      </div>

      <footer className="bg-gradient-to-r from-stone-900 via-stone-800 to-stone-900 text-white mt-16 shadow-2xl">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="space-y-3">
              <h3 className="text-2xl font-black mb-4">Contactez-nous</h3>
              <div className="flex items-center space-x-3 bg-white bg-opacity-10 rounded-lg px-4 py-2">
                <Phone className="w-5 h-5 text-blue-400" />
                <span className="font-bold">{contact.phone}</span>
              </div>
              <div className="flex items-center space-x-3 bg-white bg-opacity-10 rounded-lg px-4 py-2">
                <Mail className="w-5 h-5 text-blue-400" />
                <span className="font-bold">{contact.email}</span>
              </div>
            </div>
            <div className="flex flex-col gap-3">
              <a
                href={reviewLink}
                target="_blank"
                rel="noopener noreferrer"
                className="px-6 py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 rounded-xl transition-all shadow-lg flex items-center space-x-2 font-bold text-white"
              >
                <Star className="w-5 h-5" />
                <span>Laisser un avis</span>
              </a>
              {isAdmin && (
                <div className="flex gap-2">
                  <button
                    onClick={() => setShowAdminPanel(true)}
                    className="px-4 py-2 bg-gradient-to-r from-purple-600 to-purple-700 hover:from-purple-700 hover:to-purple-800 rounded-xl transition-all shadow-lg flex items-center space-x-2 font-bold text-sm"
                  >
                    <Edit2 className="w-4 h-4" />
                    <span>Paramètres site</span>
                  </button>
                  <button
                    onClick={() => { setTempContact(contact); setEditingContact(true); }}
                    className="flex-1 px-4 py-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 rounded-xl transition-all shadow-lg flex items-center space-x-2 font-bold text-sm"
                  >
                    <Edit2 className="w-4 h-4" />
                    <span>Contact</span>
                  </button>
                  <button
                    onClick={() => { setTempReviewLink(reviewLink); setEditingReviewLink(true); }}
                    className="flex-1 px-4 py-2 bg-gradient-to-r from-yellow-600 to-yellow-700 hover:from-yellow-700 hover:to-yellow-800 rounded-xl transition-all shadow-lg flex items-center space-x-2 font-bold text-sm"
                  >
                    <Edit2 className="w-4 h-4" />
                    <span>Lien avis</span>
                  </button>
                  <button
                    onClick={() => { setTempPassword(adminPassword); setEditingPassword(true); }}
                    className="px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 rounded-xl transition-all shadow-lg flex items-center space-x-2 font-bold text-sm"
                  >
                    <Lock className="w-4 h-4" />
                    <span>Mot de passe</span>
                  </button>
                </div>
              )}
            </div>
          </div>
        </div>
        
        <div className="text-center py-2 text-xs text-stone-500 border-t border-stone-700">
          <button
            onClick={handleAdminToggle}
            className="opacity-30 hover:opacity-100 transition-opacity text-stone-400 hover:text-stone-200"
          >
            {isAdmin ? '🔓' : '🔒'}
          </button>
        </div>
      </footer>

      {showPasswordModal && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <div className="text-center mb-6">
              <div className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Lock className="w-8 h-8 text-blue-600" />
              </div>
              <h3 className="text-2xl font-black text-blue-900">Accès administrateur</h3>
              <p className="text-stone-600 mt-2">Entrez le mot de passe pour continuer</p>
            </div>
            <input
              type="password"
              value={passwordInput}
              onChange={(e) => setPasswordInput(e.target.value)}
              onKeyPress={(e) => e.key === 'Enter' && handlePasswordSubmit()}
              placeholder="Mot de passe"
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 focus:border-blue-500 focus:outline-none font-medium"
              autoFocus
            />
            <div className="flex space-x-3">
              <button
                onClick={handlePasswordSubmit}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Valider
              </button>
              <button
                onClick={() => { setShowPasswordModal(false); setPasswordInput(""); }}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingMemo && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier le mémo</h3>
            <input
              type="text"
              value={tempMemo}
              onChange={(e) => setTempMemo(e.target.value)}
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 focus:border-blue-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => { setMemo(tempMemo); setEditingMemo(false); }}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingMemo(false)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingContact && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier les contacts</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Téléphone</label>
                <input
                  type="text"
                  value={tempContact.phone}
                  onChange={(e) => setTempContact({ ...tempContact, phone: e.target.value })}
                  className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl focus:border-blue-500 focus:outline-none font-medium"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Email</label>
                <input
                  type="email"
                  value={tempContact.email}
                  onChange={(e) => setTempContact({ ...tempContact, email: e.target.value })}
                  className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl focus:border-blue-500 focus:outline-none font-medium"
                />
              </div>
            </div>
            <div className="flex space-x-3 mt-6">
              <button
                onClick={() => { setContact(tempContact); setEditingContact(false); }}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingContact(false)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingReviewLink && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier le lien des avis</h3>
            <input
              type="url"
              value={tempReviewLink}
              onChange={(e) => setTempReviewLink(e.target.value)}
              placeholder="https://g.page/r/votre-lien/review"
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 focus:border-blue-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => { setReviewLink(tempReviewLink); setEditingReviewLink(false); }}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingReviewLink(false)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingRealisationCategory && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier la catégorie</h3>
            <input
              type="text"
              value={tempRealisationName}
              onChange={(e) => setTempRealisationName(e.target.value)}
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 focus:border-blue-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => updateRealisationCategory(editingRealisationCategory, tempRealisationName)}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingRealisationCategory(null)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingHomePage && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-2xl w-full shadow-2xl border-2 border-blue-100 max-h-[90vh] overflow-y-auto">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier la page d'accueil</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Titre principal</label>
                <input
                  type="text"
                  value={tempHomeData.title}
                  onChange={(e) => setTempHomeData({ ...tempHomeData, title: e.target.value })}
                  className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl focus:border-blue-500 focus:outline-none font-medium"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Sous-titre</label>
                <input
                  type="text"
                  value={tempHomeData.subtitle}
                  onChange={(e) => setTempHomeData({ ...tempHomeData, subtitle: e.target.value })}
                  className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl focus:border-blue-500 focus:outline-none font-medium"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Description</label>
                <textarea
                  value={tempHomeData.description}
                  onChange={(e) => setTempHomeData({ ...tempHomeData, description: e.target.value })}
                  rows={4}
                  className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl focus:border-blue-500 focus:outline-none font-medium resize-none"
                />
              </div>
            </div>
            <div className="flex space-x-3 mt-6">
              <button
                onClick={() => {
                  setHomePageData(tempHomeData);
                  setEditingHomePage(false);
                }}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingHomePage(false)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {showAdminPanel && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-lg w-full shadow-2xl border-2 border-purple-100 max-h-[90vh] overflow-y-auto">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-2xl font-black text-purple-900">Paramètres du site</h3>
              <button onClick={() => setShowAdminPanel(false)} className="p-2 hover:bg-stone-100 rounded-lg">
                <X className="w-5 h-5 text-stone-600" />
              </button>
            </div>
            
            <div className="space-y-6">
              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Nom du site</label>
                <input
                  type="text"
                  value={siteName}
                  onChange={(e) => setSiteName(e.target.value)}
                  className="w-full px-4 py-3 border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:outline-none font-medium"
                />
              </div>

              <div>
                <label className="block text-sm font-bold text-stone-700 mb-2">Sous-titre</label>
                <input
                  type="text"
                  value={siteSubtitle}
                  onChange={(e) => setSiteSubtitle(e.target.value)}
                  className="w-full px-4 py-3 border-2 border-purple-200 rounded-xl focus:border-purple-500 focus:outline-none font-medium"
                />
              </div>

              <div>
                <label className="block text-sm font-bold text-stone-700 mb-3">Couleur du thème</label>
                <div className="grid grid-cols-5 gap-3">
                  {Object.entries(themeColors).map(([colorKey, colorValue]) => (
                    <button
                      key={colorKey}
                      onClick={() => setThemeColor(colorKey)}
                      className={`h-16 rounded-xl transition-all ${
                        themeColor === colorKey
                          ? 'ring-4 ring-offset-2 ring-purple-500 scale-110'
                          : 'hover:scale-105'
                      } bg-gradient-to-br ${colorValue.gradient}`}
                    >
                      <span className="sr-only">{colorKey}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>

            <button
              onClick={() => setShowAdminPanel(false)}
              className="w-full mt-6 px-4 py-3 bg-gradient-to-r from-purple-600 to-purple-700 text-white rounded-xl hover:from-purple-700 hover:to-purple-800 font-bold shadow-lg"
            >
              Fermer
            </button>
          </div>
        </div>
      )}

      {editingPassword && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-red-100">
            <div className="text-center mb-6">
              <div className="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                <Lock className="w-8 h-8 text-red-600" />
              </div>
              <h3 className="text-2xl font-black text-red-900">Modifier le mot de passe admin</h3>
              <p className="text-stone-600 mt-2">Choisissez un nouveau mot de passe</p>
            </div>
            <input
              type="text"
              value={tempPassword}
              onChange={(e) => setTempPassword(e.target.value)}
              placeholder="Nouveau mot de passe"
              className="w-full px-4 py-3 border-2 border-red-200 rounded-xl mb-6 focus:border-red-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => { setAdminPassword(tempPassword); setEditingPassword(false); }}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white rounded-xl hover:from-red-700 hover:to-red-800 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingPassword(false)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingCategory && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier la catégorie</h3>
            <input
              type="text"
              value={tempCategory}
              onChange={(e) => setTempCategory(e.target.value)}
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 focus:border-blue-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => updateCategory(editingCategory, tempCategory)}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingCategory(null)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingPage && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier la page</h3>
            <input
              type="text"
              value={tempPage}
              onChange={(e) => setTempPage(e.target.value)}
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 focus:border-blue-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => updatePage(editingPage.categoryId, editingPage.pageId, tempPage)}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingPage(null)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingContent && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-2xl w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Modifier le texte</h3>
            <textarea
              value={tempContent}
              onChange={(e) => setTempContent(e.target.value)}
              rows={6}
              className="w-full px-4 py-3 border-2 border-blue-200 rounded-xl mb-6 resize-none focus:border-blue-500 focus:outline-none font-medium"
            />
            <div className="flex space-x-3">
              <button
                onClick={() => updateContent(
                  editingContent.categoryId, 
                  editingContent.pageId, 
                  editingContent.contentId, 
                  tempContent
                )}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingContent(null)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}

      {editingLayout && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
          <div className="bg-white rounded-2xl p-8 max-w-lg w-full shadow-2xl border-2 border-blue-100">
            <h3 className="text-2xl font-black text-blue-900 mb-6">Choisir la mise en page</h3>
            <div className="grid grid-cols-2 gap-4 mb-6">
              {layouts.map(layout => {
                const Icon = layout.icon;
                return (
                  <button
                    key={layout.id}
                    onClick={() => setTempLayout(layout.id)}
                    className={`p-6 rounded-xl border-2 transition-all ${
                      tempLayout === layout.id
                        ? 'border-blue-600 bg-blue-50 shadow-lg'
                        : 'border-stone-200 hover:border-blue-300 hover:bg-blue-50'
                    }`}
                  >
                    <Icon className={`w-8 h-8 mx-auto mb-3 ${
                      tempLayout === layout.id ? 'text-blue-600' : 'text-stone-400'
                    }`} />
                    <p className={`text-sm font-bold text-center ${
                      tempLayout === layout.id ? 'text-blue-900' : 'text-stone-600'
                    }`}>
                      {layout.name}
                    </p>
                  </button>
                );
              })}
            </div>
            <div className="flex space-x-3">
              <button
                onClick={() => updatePageLayout(editingLayout.categoryId, editingLayout.pageId, tempLayout)}
                className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl hover:from-blue-700 hover:to-indigo-700 font-bold shadow-lg"
              >
                Enregistrer
              </button>
              <button
                onClick={() => setEditingLayout(null)}
                className="flex-1 px-4 py-3 bg-stone-200 text-stone-700 rounded-xl hover:bg-stone-300 font-bold"
              >
                Annuler
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default RenovationWebsite;